<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>热力图示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <style type="text/css">
      html, body {
          width: 100%;
          height: 100%;
      }
      * {
          margin: 0px;
          padding: 0px;
      }
      button {
          width: 100px;
          border: 1px solid #555;
      }
      #container {
          height: 90%;
      }
  </style>
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>
  <script>
    window.onload = function(){
      // 创建地图
      var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(39.9,116.4),
        zoom:8,
        mapStyleId : 'style1'
      });
      // 创建热力图对象
      var heat = new qq.maps.visualization.Heat({
        map: map, // 必填参数，指定显示热力图的地图对象
        radius: 15, // 辐射半径，默认为20
        gradient: {

        }
      });
      // 获取热力数据
      var data = getHeatData();
      // 向热力图传入数据
      heat.setData(data);

      // 监听button事件，更改热力图配置参数
      document.getElementById("setOptions").addEventListener("click", function(e) {
        var target = e.target;
        switch (target.id) {
          case "show":
            if (heat.visible) {
              heat.hide(); // 显示热力图
            } else {
              heat.show(); // 隐藏热力图
            }
            break;
          case "data":
            data = getHeatData(10);
            heat.setData(data); // 重置热力图数据
            break;
          case "radius":
            let radius = heat.getRadius(); // 获取辐射半径
            heat.setRadius(radius + 10); // 设置辐射半径
            break;
          case "gradient":
            let gradient = heat.getGradient(); // 获取渐变色
            gradient[1.0] = "#04fafa"; // 强度最大为白色
            gradient[0.9] = "#04fafa";
            gradient[0.8] = "#04fafa";
            gradient[0.7] = "#aef8f8";
            gradient[0.6] = "#aef8f8";
            gradient[0.5] = "#aef8f8";
            gradient[0.4] = "#aef8f8";
            gradient[0.3] = "#e0f8f8";
            gradient[0.2] = "#e0f8f8";
            gradient[0.1] = "#e0f8f8";
            gradient[0] = "#e0f8f8";
            heat.setGradient(gradient); // 设置渐变色
            break;
          case "opacity":
            let opacity = heat.getOpacity();
            opacity = [0.2, 0.8]; // 透明度变化范围为0.2～0.8
            heat.setOpacity(opacity); // 设置透明度变化范围
            break;
          case "destroy":
            heat.destroy();
          default:
        }
      });

      function getHeatData(cnt, max, min) {
        let data = [];
        let center = {
          lat: 39.9,
          lng: 116.4
        };
        cnt = cnt || 100;
        max = max || 100;
        min = min || 0;
        for (let index = 0; index < 20; index++) {
          let r = Math.random();
          let angle = Math.random() * Math.PI * 2;
          let heatValue = Math.random() * (max - min) + min;
          data.push({
            lat: center.lat + r * Math.sin(angle),
            lng: center.lng + r * Math.cos(angle),
            value: heatValue
          });
        }
        return {
          max: max,
          min: min,
          data: data
        };
      }
    }
  </script>
</head>
<body>
<div id="container"></div>
<div id="setOptions">
  <button id="show">显示/隐藏</button>
  <button id="data">更新数据</button>
  <button id="radius">改变半径</button>
  <button id="gradient">改变颜色</button>
  <button id="opacity">改变透明度</button>
  <button id="destroy">销毁对象</button>
</div>
</body>
</html>
